import QtQuick 1.0
//import ShellInvoker 1.0


FocusScope {
    id: etapeItem
    signal choiceLink(string lien)
    width: 600
    height: 700
    focus:true
    Keys.onPressed: {
	  console.log("keyEtapeItem:" + event.key);
    }
    function loadData(data){
		dataModel.clear();
		for(var i=0;i<data.length;i++){
			dataModel.append(data[i]);
		}
	}
	
    Component.onCompleted: {
	  loadData([{"nom": "Chez Magali", "urlImage": "http://images.m6replay.fr/0046003204895568-c1-photo-220112-jpg.jpg", "descriptif": "Magali, 40 ans, maman de Charlotte, 14 ans, et Alexandra, 11 ans, a d\u00fb quitter son logement de fonction lors de son divorce pour s'installer pr\u00e9cipitamment dans un appartement h\u00e9bergeant auparavant une personne \u00e2g\u00e9e.", "lien": "rtmpe://m6dev.fcod.llnwd.net:443/a3100/d1/mp4:production/regienum/m6_d-co_s15e16_251092_220120121830.mp4"}, {"nom": "Chez Alexandre Et Carole", "urlImage": "http://images.m6replay.fr/0046003204882406-c1-photo-150112-jpg.jpg", "descriptif": "Alexandre, 33 ans, et sa femme, Carole, 38\u00a0ans, vivent ensemble depuis 5 ans dans un petit pavillon, une habitation qui appartient \u00e0 l'origine \u00e0 la jeune femme. Depuis que Carole est \u00e0 la recherche d'un nouvel emploi, elle est plus souvent chez elle qu'auparavant, ce qui lui a permis de prendre conscience que la d\u00e9co et l'am\u00e9nagement de son salon et de sa cuisine ne sont pas du tout coh\u00e9rents...", "lien": "rtmpe://m6dev.fcod.llnwd.net:443/a3100/d1/mp4:production/regienum/m6_d-co_247630_150120121845.mp4"}]);
	}
    
    ListModel {
	     id: dataModel
	}
		  
    
	
    Rectangle {
		color: "#003300"
		/*anchors.verticalCenter:parent.verticalCenter
		anchors.right:parent.right
		anchors.rightMargin:70
		width:400*/
		anchors.fill:parent
		border.width:2
		border.color:'#ccff33'
		
		Text {
			id:epTxt
// 			anchors.top:parent.top
// 			anchors.topMargin:70
// 			width:parent.with - 100
// 			height:parent.height - 200
// 			anchors.horizontalCenter:parent.horizontalCenter
			anchors.fill:parent
			font.family: "Helvetica"
			font.pointSize: 18
			wrapMode:Text.WordWrap
			color: '#ccff33'
		}
							
		Image {
			id:epImg
			width: 100
			height: 100
			anchors.bottom:view.top
			anchors.horizontalCenter:view.horizontalCenter
			fillMode:Image.PreserveAspectFit
			smooth : true
		}
		
		  
		ListView {
			  id:view
			  width: 400
			  height: 200
			  anchors.bottom:parent.bottom
			  anchors.horizontalCenter:parent.horizontalCenter
			  anchors.bottomMargin:40
			  focus: true
			  model: dataModel
			  orientation : ListView.Vertical
			  spacing : 25
			  delegate: Rectangle  {
							width: 400
							height: 50
							anchors.horizontalCenter : parent.horizontalCenter
							color:'#ccff33'
							id:rectItem
							radius:5
							
							Keys.onReturnPressed : {
								var link = lien.replace('rtmpe://','rtmp://');
								etapeItem.choiceLink(link);
								event.accepted = true;
						    }
							Rectangle  {
								opacity: 0.5
								anchors.fill:parent
								radius:5
								gradient: Gradient  {
									GradientStop  { position: 0.1; color: "#ccff33" }
									GradientStop  { position: 0.5; color: "#33001f" }
									GradientStop  { position: 0.9; color: "#ccff33" }
									}
							}
							Rectangle  {
								anchors.bottom:parent.bottom
								width:parent.width
								height:8
								radius:5
								//color: "#33001f"
								gradient: Gradient  {
									GradientStop  { position: 0.0; color: "#ccff33" }
									GradientStop  { position: 1; color: "#33001f" }
									//GradientStop  { position: 1; color: "transparent" }
									}
							}

							Text {
								anchors.centerIn:parent
								text: nom
								font.family: "Helvetica"
								font.pointSize: 15
								color: "#33001f"
							}

							states: State {
								name: "active"; when: rectItem.activeFocus
								PropertyChanges { target: rectItem;scale: 1.3 }
								PropertyChanges { target: epImg; source:urlImage }
								PropertyChanges { target: epTxt; text:descriptif }
							}

							transitions: Transition {
							NumberAnimation { properties: "scale"; duration: 100 }
							}
						}
				
		}
 	 
	}
}
